<template>
	<el-row class="login">
		 <div style='margin-top: 15%'></div>
		  <el-col :offset="8" :span="4">
			  <el-form  label-width="100px" class="demo-ruleForm">
				<el-form-item label="账号" prop="pass">
				  <el-input type="name" v-model.trim="name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="checkPass">
				  <el-input type="password" v-model.trim="password" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
				  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
				</el-form-item>
			  </el-form>
		  </el-col>
	</el-row>
</template>

<style>
.login {
  background-color: #000;
   background-image: linear-gradient(to right, #1f1c2c 0%, #928dab 52%, #1f1c2c 100%);
   animation: background 20s ease-in-out infinite;
   height: 100vh;
  }
  
  @keyframes background {
   0% {
    background-color: #000;
   }
   50% {
    background-color: #1f1c2c;
   }
   100% {
    background-color: #000;
   }
   
}
.el-form-item__label{
		color: #fff!important;
	}

</style>



<script>
import {zh, mm} from '/utilis/common.js'
  export default {
    data() {
      return {
		name:'',
		password:''
      };
    },
	created() {
		let name = localStorage.getItem('name');
		if(name){
			this.name = name
		}
	},
    methods: {
      submitForm(formName) {
		if(!this.name){
			this.$message({
			  showClose: true,
			  message: '账号不能为空！',
			  type:'error'
			});
			return false;
		}
		if(!this.password){
			this.$message({
			  showClose: true,
			  message: '密码不能为空！',
			  type:'error'
			});
			return false;
		}
		if(this.name != zh){
			this.$message({
			  showClose: true,
			  message: '账号错误！',
			  type:'error'
			});
			return false;
		}
		if(this.password != mm){
			this.$message({
			  showClose: true,
			  message: '密码错误！',
			  type:'error'
			});
			return false;
		}
		this.$message({
		  showClose: true,
		  message: '登录成功',
		  type:'success'
		});
		localStorage.setItem('is_login',1)
		localStorage.setItem('name',zh)
		// 
      },
    }
  }
</script>